<template>
  <div style="padding: 10px">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="讲师" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="teacherQuery.level" placeholder="头衔">
          <el-option label="高级讲师" value="1" />
          <el-option label="首席讲师" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="入驻时间">
        <el-date-picker
          v-model="teacherQuery.joinDateBegin"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始时间"/>
        -
        <el-date-picker
          v-model="teacherQuery.joinDateEnd"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束时间"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="queryByCondition">查询</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>

    <!-- 批量删除 -->
    <div style="margin-bottom: 10px">
      <el-button type="danger" plain @click="handleBathcDel">批量删除</el-button>
    </div>

    <el-table :data="teachers" stripe border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="avatar" label="头像" width="90" >
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 60px;height : 60px">
          <img v-else src="https://sh210108-guli-fudada.oss-cn-hangzhou.aliyuncs.com/avatar/default.jpg" style="width: 60px;height: 60px">
        </template>
      </el-table-column>

      <el-table-column prop="level" label="头衔" width="100">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.level === 1"
            type="primary"
            disable-transitions
          >高级讲师</el-tag>
          <el-tag v-else type="success" disable-transitions>首席讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="career" label="资历" show-overflow-tooltip />
      <el-table-column prop="sort" width="50" label="排序" />
      <el-table-column prop="joinDate" width="100" label="入住时间" />
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center; margin-top: 15px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import teacherApi from '@/api/teacher'
export default {
  data() {
    return {
      teachers: [],
      teacherQuery: {},
      pageNum: 1, // 当前页码
      pageSize: 3, // 每页显示几条
      total: 0, // 总记录条数
      multiSel: []

    }
  },
  created() {
    // this.getTeacher()
    this.getTeacherPage()
  },
  // 相当于在vue对象中写代码
  methods: {
    // 条件查询
    queryByCondition() {
      this.getTeacherPage()
    },
    // 清空条件按钮单击事件
    clear() {
      this.teacherQuery = {}// 删除条件缓存
      this.pageNum = 1
      this.pageSize = 3
      this.getTeacherPage()
    },

    //   编辑事件
    handleEdit(idx, row) {
      // console.log(idx, row)
      this.$router.push(`/teacher/edit/${row.id}`)
    },
    // 删除事件
    handleDelete(idx, row) {
      this.$confirm(`此操作将永久删除讲师【${row.name}】, 是否继续?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teacherApi.deleteById(row.id).then(r => {
          this.$message.success('删除成功')
          this.getTeacherPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询讲师分页数据
    getTeacherPage() {
      teacherApi.listPage(this.pageNum, this.pageSize, this.teacherQuery).then((r) => {
        // r.data.page 分页对象
        // 分页列表数据 records
        this.teachers = r.data.page.records
        // 总记录条数
        this.total = r.data.page.total
      })
    },
    // 查询所有
    getTeacher() {
      teacherApi.list().then((r) => {
        // 由于响应拦截器，拦截响应并处理了，r代表 响应报文的响应体内容，也就是后台响应的r对象的数据
        this.teachers = r.data.items
      })
    },
    // 批量删除
    handleBathcDel() {
      if (this.multiSel.length === 0) {
        this.$message.warning('请选择要删除的行')
        return
      }
      const idsArr = []
      this.multiSel.forEach((item) => {
        idsArr.push(item.id)
      })
      const ids = idsArr.join(',') // 将数组中每两个元素使用逗号拼接为字符串
      console.log(ids)
      teacherApi.batchDel(ids).then(r => {
        this.$message.success('批量删除成功')
        this.getTeacherPage()
      })
    },
    // 记录选择框的ids
    handleSelectionChange(val) {
      this.multiSel = val
    },
    // 选择的pageSize改变时的回调函数
    handleSizeChange(val) {
      console.log(val)
      this.pageSize = val
      this.getTeacherPage()
    },
    // 页面改变时的回调函数
    handleCurrentChange(val) {
      this.pageNum = val
      this.getTeacherPage()
    }
  }
}
</script>
<style>
/*//宽度可以使用max-width显示,占比为屏幕占比，高度用max-height是行不通的,于是就用的超出行省略，当*/
/*//在限制的宽度之内多少行限制(不限制当内容几千几万字时就挂了),padding为了调整我这个正好15行省略看*/
/*//起来样式不会出问题,有问题的话可以调padding,line-height,font-size保证展示框样式完整*/
.el-tooltip__popper{
    max-width:30%;
    padding-bottom: 5px!important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;

  }
.el-tooltip__popper,.el-tooltip__popper.is-dark{
  background:rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>
